<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="skin/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<style>
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			.keyborad {
				width: 100%;
				height: 240px;
				background: #fff;
				position: fixed;
				z-index: 101;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				font-family: "microsoft yahei";
				/* Opera */
			}
			
			.keyborad ul {
				width: 75%;
				float: left;
			}
			
			.keyborad li {
				height: 60px;
				border-top: 1px solid #dedede;
				box-sizing: border-box;
			}
			
			.keyborad li dt {
				width: calc(100% / 3);
				height: 60px;
				float: left;
				text-align: center;
				line-height: 60px;
				font-size: 24px;
				font-family: "微软雅黑";
				box-sizing: border-box;
			}
			
			.keyborad li dt:nth-child(3n+2) {
				border-left: 1px solid #dedede;
				border-right: 1px solid #dedede;
			}
			
			.icon-jianpanxiahua {
				font-size: 32px !important;
			}
			
			.clear {
				clear: both;
			}
			
			.del {
				width: 25%;
				height: 120px;
				float: left;
				border-left: 1px solid #dedede;
				border-top: 1px solid #dedede;
				box-sizing: border-box;
				text-align: center;
				line-height: 120px;
			}
			
			.button {
				width: 25%;
				height: 120px;
				float: left;
				box-sizing: border-box;
				border-left: 1px solid #dedede;
				border-top: 1px solid #dedede;
				border-bottom: 1px solid #dedede;
				text-align: center;
				line-height: 120px;
				font-size: 20px !important;
			}
			
			.icon-jianpan_shanchu {
				font-size: 24px !important;
			}
			
			a,
			i,
			span,
			div {
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			dt,
			div {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			
			.range {
				border-top: 1px solid #dedede;
				height: 50px;
				display: none;
			}
			
			.range div {
				float: left;
			}
			
			.range .value {
				width: calc(100% - 100px);
				height: 50px;
			}
			
			.range .value input {
				width: 100%;
				margin-top: 20px;
			}
			
			.range .reduce,
			.range .add {
				width: 50px;
				height: 50px;
				text-align: center;
				font-size: 24px;
			}
			
			.range .reduce:before {
				content: "-";
				display: inline-block;
				width: 30px;
				height: 30px;
				background: green;
				line-height: 25px;
				margin-top: 10px;
				color: #fff;
				border-radius: 5px;
			}
			
			.range .add:before {
				content: "+";
				display: inline-block;
				width: 30px;
				height: 30px;
				background: red;
				line-height: 30px;
				font-weight: 400;
				margin-top: 10px;
				color: #fff;
				border-radius: 5px;
			}
			
			input[type=range] {
				-webkit-appearance: none;
				border-radius: 10px;
				/*这个属性设置使填充进度条时的图形为圆角*/
				background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
				background-size: 0% 100%;
			}
			
			input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
			}
			
			input[type=range]::-webkit-slider-runnable-track {
				height: 10px;
				border-radius: 10px;
				/*将轨道设为圆角的*/
				box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
				/*轨道内置阴影效果*/
			}
			
			input[type=range]:focus {
				outline: none;
			}
			
			input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				height: 25px;
				width: 25px;
				margin-top: -10px;
				/*使滑块超出轨道部分的偏移量相等*/
				background: #ffffff;
				border-radius: 50%;
				/*外观设置为圆形*/
				border: solid 0.125em rgba(205, 224, 230, 0.5);
				/*设置边框*/
				box-shadow: 0 .125em .125em #3b4547;
				/*添加底部阴影*/
			}
		</style>

	</head>

	<body>
		<div id="range" style="display: none;"  class="range">
			<div class="reduce" ontouchstart="reduce()"></div>
			<div class="value"><input id="txtrange" type="range" name="points" min="0" value="0" max="10000" oninput="rangeChange(this)" /></div>
			<div class="add" ontouchstart="add()"></div>
		</div>
		<div class="keyborad">
			<ul>
				<li>
					<dt ontouchstart="clkValue('1')">1</dt>
					<dt ontouchstart="clkValue('2')">2</dt>
					<dt ontouchstart="clkValue('3')">3</dt>
				</li>
				<li>
					<dt ontouchstart="clkValue('4')">4</dt>
					<dt ontouchstart="clkValue('5')">5</dt>
					<dt ontouchstart="clkValue('6')">6</dt></li>
				<li>
					<dt ontouchstart="clkValue('7')">7</dt>
					<dt ontouchstart="clkValue('8')">8</dt>
					<dt ontouchstart="clkValue('9')">9</dt></li>
				<li>
					<dt ontouchstart="clkValue('.')">.</dt>
					<dt ontouchstart="clkValue('0')">0</dt>
					<dt ontouchstart="hide()" class="iconfont icon-jianpanxiahua"></dt>
				</li>
				<div class="clear"></div>
			</ul>
			<div id="del" ontouchstart="del()" class="del iconfont icon-jianpan_shanchu">
			</div>
			<div id="btn" class="button" ontouchstart="clkSubmit()">
				买入
			</div>
		</div>

		<script type="text/javascript">
			var opener = null;
			var current = null;
			var max = 0;
			var min = 0;
			var step = 0;
			var mold = 0; //0卖 1买

			function rangeChange(obj) {
				if(max != 0) {
					var per = parseFloat((obj.value * 100) / max).toFixed(4);
					console.log(per);
					obj.style.backgroundSize = per + "% 100%";
					opener.evalJS("NumRange('" + obj.value + "')");
				}
			}

			function reduce() {
				var txtrange = document.getElementById("txtrange");
				var val = parseFloat(txtrange.value) - step;
				if(val < 0) {
					val = 0;
				}
				txtrange.value = val;
				rangeChange(txtrange);
			}

			function add() {
				var txtrange = document.getElementById("txtrange");
				var val = parseFloat(txtrange.value) + step;
				if(val > max) {
					val = max;
				}
				txtrange.value = val;
				rangeChange(txtrange);
			}

			function setValue(value) {
				console.log(value);
				var obj = document.getElementById("txtrange");
				obj.value = value;
				var per = 0;
				if(max == 0) {
					per = 0;
				} else {
					per = parseFloat((obj.value * 100) / max).toFixed(4);
				}
				console.log(per);
				obj.style.backgroundSize = per + "% 100%";
			}

			function showRange(s, _mold, _value, _max, _step) {
				mold = _mold;
				document.getElementById("btn").innerHTML = (mold == 1 ? "卖出" : "买入");
				if(s) {
					max = _max;
					step = _step;
					var obj = document.getElementById("txtrange");
					setValue(_value);
					obj.setAttribute("max", max);
					obj.setAttribute("min", 0);
					obj.setAttribute("step", step);
					document.getElementById("range").style.display = "block";
				} else {
					document.getElementById("range").style.display = "none";
				}
			}

			document.addEventListener("plusready", function() {
				current = plus.webview.currentWebview();
				
			});

			function clkValue(v) {
				opener = plus.webview.getWebviewById("trade");// current.opener();
				opener.evalJS("clkNum('" + v + "')");
			}
			var hide = function() {
				//current.hide("slide-out-bottom", 200);
				opener = plus.webview.getWebviewById("trade");// current.opener();
				opener.evalJS("clkBody()");
			}
			var del = function() {
				opener = plus.webview.getWebviewById("trade");// current.opener();
				opener.evalJS("clkNum('')");
			}
			var clkSubmit=function(){
				opener = plus.webview.getWebviewById("trade");// current.opener();
				opener.evalJS("submit()");
			}
		</script>
	</body>

</html>